<template>
  <div>
    <!-- <div @click="btnnn" v-if="hehe"> -->
    <div class="menu-container" scrollspy>
      <!-- seach搜索框 -->
      <!-- <van-nav-bar class="page-nav-bar" fixed> -->
      <Search></Search>
      <!-- </van-nav-bar> -->
      <!-- /seach搜索框 -->

      <!-- tab频道栏 -->
      <van-tabs class="channel-tabs" v-model="active">
        <!-- 预售中 -->
        <PreSale v-for="(obj, index) in list" :key="index" :obj="obj"></PreSale>
      </van-tabs>
      <!-- /tab频道栏 -->
    </div>
  </div>
  <!-- <div v-else><router-view></router-view></div> -->
  <!-- </div> -->
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";
import PreSale from "./components/tabs/PreSale.vue";
import Search from "../search/index";

Vue.use(Lazyload);

export default {
  components: {
    PreSale,
    Search,
  },
  data() {
    return {
      hehe: true,
      value: "",
      active: 0,
      // Biglist: ['预售中', '现货键帽', '量产键盘', '客制化键盘', '轴体'],
      list: [
        // 预售
        {
          // 导航名称
          text: "预售中",
          // 是否在导航名称右上角显示小红点
          dot: true,
          // 该导航下所有的可选项
          images: [
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/ff48cae2fe621546322abe3924b63d28.jpg",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/QQ%E5%9B%BE%E7%89%8720210318174559.png",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/d31be43b6e469dda4963c4305c2578f2.jpg",
          ],
          children: [
            {
              // 名称
              text: "GMK",
              // id，作为匹配选中状态的标识符
              id: 1,
              // 禁用选项
              disabled: true,
              img: "",
            },
            {
              text: "SP",
              id: 2,
            },
            {
              text: "JTK",
              id: 3,
            },
            {
              text: "键设局",
              id: 4,
            },
            {
              text: "RAMA WOF",
              id: 5,
            },
          ],
        },
        // 键帽
        {
          // 导航名称
          text: "现货键帽",
          // 是否在导航名称右上角显示小红点
          dot: true,
          // 该导航下所有的可选项
          images: [
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/%E5%AE%9E%E6%8B%8D14-1536x864.jpg",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/%E5%AE%9E%E6%8B%8D2-1536x864.jpg",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/%E5%AE%9E%E6%8B%8D3-1536x864.jpg",
          ],
          children: [
            {
              // 名称
              text: "热升华键帽",
              // id，作为匹配选中状态的标识符
              id: 6,
              // 禁用选项
              disabled: true,
            },
            {
              text: "PBT二色键帽",
              id: 7,
            },
            {
              text: "UV键帽",
              id: 8,
            },
            {
              text: "单颗个性",
              id: 9,
            },
          ],
        },
        // 量产
        {
          // 导航名称
          text: "量产键盘",
          // 是否在导航名称右上角显示小红点
          dot: true,
          // 该导航下所有的可选项
          images: [
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/01-deep-ocean-lanhei-1536x864.jpg",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/04-black-shadow-heihui-1536x864.jpg",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/06-stormtroope-baihei-1536x864.jpg",
          ],
          children: [
            {
              // 名称
              text: "WASD定制",
              // id，作为匹配选中状态的标识符
              id: 10,
              // 禁用选项
              disabled: true,
            },
            {
              text: "DURGOD杜伽",
              id: 11,
            },
            {
              text: "Leopold 利奥波德",
              id: 12,
            },
            {
              text: "Filco 斐尔可",
              id: 13,
            },
            {
              text: "洛斐",
              id: 14,
            },
            {
              text: "黑爵",
              id: 15,
            },
            {
              text: "阿米洛",
              id: 16,
            },
            {
              text: "HyperX",
              id: 17,
            },
            {
              text: "IKBC",
              id: 18,
            },
            {
              text: "高斯",
              id: 19,
            },
            {
              text: "达尔优",
              id: 20,
            },
          ],
        },
        // 订制
        {
          // 导航名称
          text: "订制键盘",
          // 是否在导航名称右上角显示小红点
          dot: true,
          // 该导航下所有的可选项
          images: [
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/%E5%AE%9E%E6%8B%8D9-1536x864.jpg",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/%E5%AE%9E%E6%8B%8D4-1536x864.jpg",
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/%E5%AE%9E%E6%8B%8D16-1536x864.jpg",
          ],
          children: [
            {
              // 名称
              text: "外壳",
              // id，作为匹配选中状态的标识符
              id: 21,
              // 禁用选项
              disabled: true,
            },
            {
              text: "PCB",
              id: 22,
            },
            {
              text: "数据线",
              id: 23,
            },
            {
              text: "卫星轴",
              id: 24,
            },
            {
              text: "其他配件",
              id: 25,
            },
          ],
        },
        // 轴体
        {
          // 导航名称
          text: "轴体",
          // 是否在导航名称右上角显示小红点
          dot: true,
          // 该导航下所有的可选项
          images: [
            "https://commodity-1306182989.cos.ap-nanjing.myqcloud.com/img/30dc2bb08d7ace15e20a5a05e6c0f7cd.jpg",
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=602150898,1507547802&fm=26&gp=0.jpg",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0603%252F61e817e5j00qu3r3z00ljd000xc00irp.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626427923&t=f0f337d7b558003421dd8f16e06ff8f2",
          ],
          children: [
            {
              // 名称
              text: "凯华",
              // id，作为匹配选中状态的标识符
              id: 26,
              // 禁用选项
              disabled: true,
            },
            {
              text: "TTC",
              id: 27,
            },
            {
              text: "JWK",
              id: 28,
            },
            {
              text: "佳达隆",
              id: 29,
            },
            {
              text: "Equalz",
              id: 30,
            },
          ],
        },
      ],
    };
  },
  methods: {
    // btnnn () {
    //   this.hehe = false
    //   this.$router.push('/menu/list')
    // }
  },
};
</script>

<style scoped lang="less">
.menu-container {
  // 搜索栏
  background-color: #e6e2e2;
  // background-size: cover;
  padding-top: 45px;
  padding-bottom: 40%;
  /deep/.page-nav-bar {
    background-color: #000000;
    .van-nav-bar__title {
      // max-width: none;
      // .van-button--round{
      //   border-radius: 4px;
      // }
      .search-btn {
        width: 250px;
        height: 30px;
        background-color: #5e5c5c;
        border: none;
        font-size: 15px;
        .van-button__icon {
          color: #fff;
          font-size: 15px;
        }
      }
    }
  }
  //   轮播图
  // .van-swipe-item img{
  //   width: auto;
  //   height: 200px;
  //   flex: auto;
  // }
}

/deep/ .van-search {
  z-index: 100 !important;
}
// 选择线
/deep/ .van-tabs__line {
  background-color: #000000;
}

/deep/.onCell {
  .van-cell {
    font-size: 17px;
    font-weight: 900;
    // background-color: #E6E2E2;
    margin: 10px;
    width: auto;
    border-radius: 5px;
  }
}

/deep/.search-container {
  height: 0;
}
</style>
